<template>

  <div id="applyLoan">

    <div style="background-color: white;padding-top: 35px;padding-bottom: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)">

      <!-- 申请金额 -->
      <div style="width: 80%;margin: 0 auto" class="money-input">
        <van-field readonly clickable
                   @touchstart.stop="isFocusing = true"
                   v-model="fromTab.money" label="￥"
                   placeholder="输入金额" clearable/>
      </div>

      <!-- 标签 -->
      <div style="text-align: center;display: flex;width: 80%;margin: 15px auto">
        <p v-for="i in 3"
           @click="fromTab.money=`${i}0000`"
           style="  color: #000; padding: 4px 10px;background-color: #F0F0F0; border-radius: 3px; display: inline;margin-right: 15px;font-size: 13px">
          借{{ i }}万</p>
      </div>

    </div>

    <!--  调整借款属性  -->
    <div class="card">
      <div class="card-header">
        <van-field
            is-link
            readonly
            name="area"
            v-model="fullLoanCycle"
            label="借款期数"
            @click="showPicker=true"
            placeholder="借款期数"
        />
        <van-field
            is-link
            readonly
            name="area"
            label="还款计划"
            placeholder="还款计划"
        />
        <van-field
            is-link
            readonly
            name="area"
            label="收款账户"
            placeholder="收款账户"
        />
        <van-field
            is-link
            readonly
            name="area"
            v-model="fromTab.purposeLoan"
            label="借款用途"
            @click="moneyUsePicker=true"
            placeholder="借款用途"
        />
        <van-field
            is-link
            readonly
            name="area"
            label="贷款提供方"
            placeholder="贷款提供方"
        />

      </div>

    </div>


    <div class="btn-next-class">
      <van-button type="primary" round color="linear-gradient(to right, #FFD243,#FFD243 )">
        下一步
      </van-button>

      <p style="  color: rgba(19, 30, 93, .5);font-size: .60556rem;text-align: center;">
        按日计息,次日可提前还,免违约金</p>
    </div>

    <div class="footer-popup">

      <!--  数字键盘输入  -->
      <van-number-keyboard
          :show="isFocusing"
          theme="custom"
          v-model="fromTab.money"
          maxlength="5"
          close-button-text="下一步"
          @blur="isFocusing = false"
          @input="onInput"/>

      <!-- 时间选择器     -->
      <CustomWeChatListPicker v-model:showWindow="showPicker" :columns="loanCycle" title="借款周期"
                              description="无论借多久，次日起都可以提前还"
                              v-model:value="fromTab.loanCycle"/>


      <!-- 借款用途 -->
      <CustomWeChatListPicker v-model:showWindow="moneyUsePicker" :columns="moneyUse" title="借款用途"
                              description="无论借多久，次日起都可以提前还"
                              v-model:value="fromTab.purposeLoan"/>
    </div>

  </div>

</template>

<script setup lang="ts">

/**
 * @title -申请金额填写
 * @author -qqz
 * @date -2024-04-10
 */

import {computed, ref} from 'vue';
import CustomWeChatListPicker from "@/components/CustomWeChatListPicker.vue";

const loanCycle = [{key: '5 个月', value: '5'}, {key: '10 个月', value: '10'}, {key: '20 个月', value: '20'}];

const moneyUse = [{key: '个人日常消费', value: '个人日常消费'}, {key: '房屋装修', value: '房屋装修'}, {
  key: '度假旅游', value: '度假旅游'
}, {key: '购买大额消费品', value: '购买大额消费品'}, {key: '教育支出', value: '教育支出'}, {
  key: '健康支出',
  value: '健康支出'
}];


const isFocusing = ref(false);

const showPicker = ref(false);

const moneyUsePicker = ref(false);


const fullLoanCycle = computed(() => {
  return fromTab.value.loanCycle + ' 个月';
})


const onInput = (value: any) => {
  if (fromTab.value.money.length >= 2) {
    console.log('金额符合规则' + value);
  }
};


const fromTab = ref({
  loanCycle: '5'
  ,
  purposeLoan: '个人日常消费'
  ,
  money: ''
})

</script>

<style scoped>

#applyLoan {
  width: 100%;
  height: 100vh;
  position: relative;
}

.btn-next-class {
  position: absolute;
  bottom: 5%;
  left: 50%;
  line-height: 30px;
  transform: translateX(-50%);

  text-align: center;
}

:deep(.van-button__text) {
  color: #333333;
  font-weight: bold;
}

.card {
  width: 92%;
  margin: 15px auto;
}

.money-input {
  :deep(.van-field__label) {
    width: 1.5rem !important;
    font-size: 2rem !important;
    line-height: 2.0rem !important;
    font-weight: bold;
  }

  :deep(.van-field__control) {
    font-size: 2.2rem !important;
  }

  .van-field {
    border-bottom: 1px solid #ffd01e;
    margin: 0;
    padding: 0 0 8px;
  }
}

:deep(.van-key--blue) {
  background-color: #FFD243 !important;
  font-weight: bold;
  color: #000;
}

.card {
  .card-header {
    :deep(.van-field__label) {
      font-weight: bold;
    }

    :deep(.van-field__control) {
      font-weight: bold;
    }
  }
}

</style>
